<script setup lang="ts">
import type { tableBarProps } from '@/components/index'
import { defineProps, ref } from 'vue'
import { useUsererStore } from '@/stores/user'
import { useRoute, useRouter } from 'vue-router';
import server from '@/utils/server';
import { ElMessage } from 'element-plus';
import {useBlogStore} from '@/stores/blogStore'
const router = useRouter()
const route = useRoute()
const userStore = useUsererStore()
const blogStore = useBlogStore()
let checkIndex = ref<number | null>(null)
type meun = {
    index: string
    text: string
    fn?: () => void
}
type meunType = Array<meun>
const loginOut = () => {
    server.get('/api/user/loginOut').then(res => {
        if(res.errno===0) {
            ElMessage.success(res.message)
            // 清空登录相关信息
            localStorage.removeItem('realname.id')
            userStore.removeUserInfo()
            // 清空需要登录才能获取的数据
            blogStore.clearMyblog()
            router.replace('/')
            blogStore.resetSingin()
        }
    })
}

const meunList: meunType = [
    {
        index: 'memberinfo',
        text: '个人中心',
        fn() {
            router.push('/memberinfo')
        }
    },
    {
        index: '/t',
        text: '退出登录',
        fn: loginOut
    }
]
const props = defineProps<{
    tablebarList: tableBarProps
}>()


const handleSelect = (item: meun) => {
    if (item?.fn) {
        item.fn()
    }
}

const tabSwitch = (url: string) => {
    // 避免重复点击
    if(url !== route.fullPath) {
        router.push(url)
    }
}
</script>

<template>
    <div class=" bg-white box-border md:pl-20 pr-3 pt-3 flex justify-center items-start border-t-4 border-t-red-600  ">
        <div class="lg:hidden block ">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-button class="bg-success" type="success">展开</el-button>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="relative  md:flex-1 sm:flex-1 lg:flex-none flex-1 mb-5">
            <span @click="tabSwitch('/')" class="cursor-pointer block w-full text-center text-red-600 text-xl font-bold">
                首页
            </span>
        </div>

        <div class="flex-1 mb-5 hidden  lg:block lg:w-1/2 bg-cover">
            <span v-for="(ele, idx) in props.tablebarList">
                <span :style="{color: checkIndex === idx ? 'red' : ''}" @click="checkIndex=idx" class="cursor-pointer font-black text-lg mx-8">
                    {{ele.text}}
                </span>
            </span>
        </div>
        <div class="flex justify-center items-center cursor-pointer" v-if="userStore.userInfo?.realname">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <el-dropdown  class=" pr-4">
                <span class="el-dropdown-link">
                    {{userStore.userInfo?.realname}}
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="() => handleSelect(item)" v-for="item in meunList" :index="item.index">{{item.text}}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="flex justify-center items-center cursor-pointer" v-else>
            <el-button class="bg-primary" @click="router.push('/login')" type="primary">登录</el-button>
            <el-button class="bg-success" @click="router.push('/regins')" type="success">注册</el-button>
        </div>
    </div>
</template>